<template>
  <div class="home">
    <el-form ref="form" :model="form" label-width="200px" inline-message>
      <!--<el-form-item>
        <el-tag slot="label" class="label-text">模板类型</el-tag>
        <el-select v-model="form.template" placeholder="请选择模板类型" class="select-item">
          <el-option
            v-for="item in templates"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-tag slot="label" class="label-text">模板类型路径</el-tag>
        <el-input v-model="form.template" class="select-item" placeholder="请选择模板路径(springboot程序的模板)">
          <!--点击事件有下面input替代-->
          <el-button slot="append">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-tag slot="label" class="label-text">代码生成路径</el-tag>
        <el-input v-model="form.toPath" class="select-item" placeholder="请选择代码生成路径">
          <!--点击事件有下面input替代-->
          <el-button slot="append">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-tag slot="label" class="label-text">项目英文名</el-tag>
        <el-input v-model="form.projectNameEN"
                  class="select-item"
                  placeholder="请输入项目英文名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-tag slot="label" class="label-text">包名</el-tag>
        <el-input v-model="form.pPackage"
                  class="select-item"
                  placeholder="请输入包名:xxx.xxx.xxx"></el-input>
      </el-form-item>
      <el-form-item>
        <el-tag slot="label" class="label-text">项目中文名</el-tag>
        <el-input v-model="form.projectNameCH"
                  class="select-item"
                  placeholder="请输入项目中文名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-tag slot="label" class="label-text">作者</el-tag>
        <el-input v-model="form.author"
                  class="select-item"
                  placeholder="请输入作者名"></el-input>
      </el-form-item>
      <el-form-item class="from-button">
        <el-row>
          <el-col :span="8">
            <el-button type="primary" @click="back">上页</el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="onSubmit">生成</el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="onClose">下页</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <!--这是隐藏的input-file,用来打开选择的文件夹webkitdirectory表示选择文件夹-->
    <input id="file" type=file webkitdirectory @change="selectFiles($event)">
    <!--这是隐藏的input-file,用来打开选择的文件夹webkitdirectory表示选择文件夹-->
    <input id="tempaltePath" type=file webkitdirectory @change="selectFiles2($event)">
  </div>
</template>

<script>
// @ is an alias to /src
import { CODE_GENERATION } from '../api/http'
export default {
  name: 'home',
  data () {
    return {
      form: {
        template: 'springboot程序的模板',
        toPath: '',
        projectNameEN: 'springboot-test',
        projectNameCH: 'springboot测试',
        pPackage: 'com.simon.guo',
        author: 'simon'
      },
      templates: [
        {
          value: 'springboot程序的模板',
          label: 'springboot程序的模板'
        },
        {
          value: 'vue的前端界面模板',
          label: 'vue的前端界面模板'
        }
      ]
    }
  },
  methods: {
    onSubmit () {
      let dbStr = localStorage.getItem('__D__B__')
      // this.form.template = 'G:\\123\\模板\\springboot程序的模板'
      // console.log(this.form)
      let dataBase = JSON.parse(dbStr)
      CODE_GENERATION({ ...this.form, dataBase }).then(res => {
        console.log(res)
        if (res.flag) {
          this.$message({
            message: res.message,
            type: 'success', // success/warning/info/error
            center: true
          })
        } else {
          this.$message({
            message: res.message,
            type: 'warning', // success/warning/info/error
            center: true
          })
        }
      })
    },
    selectFiles (event) {
      let files = event.target.files
      if (files.length === 1 && files[0].path) {
        this.form.toPath = files[0].path
      }
    },
    selectFiles2 (event) {
      let files = event.target.files
      if (files.length === 1 && files[0].path) {
        this.form.template = files[0].path
      }
    },
    onClose () {
      // 跳转到首页
      this.$router.replace('/sendMsg')
      // this.$router.replace('/')
    },
    back () {
      // 跳转到首页
      this.$router.replace('/')
      // this.$router.replace('/')
    }
  },
  mounted () {
    // document.querySelector('#b').addEventListener('change', e => {
    //   for (let entry of e.target.files) {
    //     console.log(entry.name, entry.webkitRelativePath)
    //   }
    // })
  }
}
</script>
<style lang="scss">
  .home {
    position: relative;
    #file {
      width: 71px;
      height: 39px;
      position: absolute;
      top: 60px;
      left: 688px;
      opacity: 0;
    }
    #tempaltePath {
      width: 71px;
      height: 39px;
      position: absolute;
      top: 1px;
      left: 688px;
      opacity: 0;
    }
    .el-form-item {
      margin: 19px 0;
    }
    .el-form-item__label {
      text-align: center;
      padding: 0;
    }
    .from-button {
      margin: 38px 0 0 0;
      .el-form-item__content {
        margin-left: 0!important;
      }
    }
    .label-text {
      background-color: #e8f9fd;
      display: inline-block;
      height: 40px;
      padding: 0 10px;
      line-height: 40px;
      font-size: 14px;
      color: #1dc4e9;
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
    }
    .select-item {
      width: 100%;
    }
  }
</style>
